/*
 * Copyright (C) 2010 Google Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/** Choices to show in gadget. */
var CHOICES = [ {
  value : 'new',
  label : 'Not Started',
  color : '#d00'
}, {
  value : 'built',
  label : 'Built',
  color : '#fe0'
}, {
  value : 'tested',
  label : 'Tested',
  color : '#f80'
}, {
  value : 'live',
  label : 'Live',
  color : '#080'
} ];

var COLORS = {};
for ( var i = 0; i < CHOICES.length; i++) {
  COLORS[CHOICES[i].value] = CHOICES[i].color;
}

/**
 * Initialise list with all possible choices
 */
function addChoices() {
  wave.log('Adding choices: ' + CHOICES);
  var ol = $('ol');
  for ( var i = 0; i < CHOICES.length; i++) {
    var choice = CHOICES[i];
    ol.append('<li id="' + choice.value + '"><div>' + choice.label
        + '</div></li>');
    var newLi = ol.find('li:last-child');
    newLi.data('index', i);
    newLi.data('value', choice.value);
  }

  $("li").click(onItemClicked)
  gadgets.window.adjustHeight();
}

/**
 * Callback for list item being clicked.
 */
function onItemClicked(event) {
  if ($("body").hasClass("edit")) {
    // Push new choice in to wave.
    wave.getState().submitValue('choice', $(this).data('value'))
  }
  return false;
}

/**
 * Wave status update callback.
 */
function onWaveUpdated() {
  wave.log('Gadget state is ' + wave.getState());
  if (wave.getState() == null) {
    return;
  }

  // For demo purposes, leave in edit mode all the time
  // if (wave.getMode() == wave.Mode.EDIT) {
  $("body").addClass('edit');
  // } else {
  // $("body").removeClass('edit');
  // }

  var choice = wave.getState().get('choice', 'new');

  var prevOn = $("li.on");
  $("li").removeClass("on");
  var currOn = $('#' + choice)
  currOn.addClass("on").addClass("slightlyOn");

  // Ensure mover created
  var mover = $("#mover");
  if (mover.length <= 0) {
    mover = $('<div id="mover"></div>').appendTo("body");
  }

  // Set mover to correct height and width
  mover.stop().css("width", currOn.width());
  mover.css("top", currOn.offset().top + currOn.outerHeight);

  if (prevOn.size() == 0) {
    // Set to final size now
    mover.css("left", currOn.offset().left);
    mover.css("backgroundColor", COLORS[choice]);
  } else {
    mover.css("left", prevOn.offset().left);
    mover.css("backgroundColor", COLORS[prevOn.get(0).id]);
    mover.animate( {
      left : currOn.offset().left,
      backgroundColor : COLORS[choice]
    }, 500, function() {
      currOn.addClass("on");
    });
  }
}

/**
 * Gadget initialisation function.
 */
function init() {
  addChoices();
  wave.setStateCallback(onWaveUpdated);
  wave.setModeCallback(onWaveUpdated);
}

gadgets.util.registerOnLoadHandler(init);
